<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>本地缓存</title>
</head>

<body>
	<button>设置缓存</button>
	<button>获取缓存</button>
	<button>删除缓存</button>
	<button>遍历缓存</button>
	<button>清空缓存</button>

	<script type="text/javascript">
		let aBtn = document.querySelectorAll('button')
		
		console.log(document.cookie);
		
		let Cookie = {
			setItem(key,value,expires){
				let date = expires?new Date( Date.now() + expires*1000*60*60*24 - 8*60*60*1000 ):null  
				document.cookie  = `${key}=${value};expires=` + date
			},
			getItem(key){
				return this.getAll()[key]
			},
			removeItem(key){
				this.setItem(key,'',-1)
			},
			getAll(){
				let cook = document.cookie
				let arr = cook.split('; ')
				let obj = {}
				for (let i = 0; i < arr.length; i++) {
					let newArr = arr[i].split('=')
					obj[newArr[0]] = newArr[1]
				}
				return obj
			},
			clear(){
				let obj = this.getAll()
				for (let key in obj) {
					this.removeItem(key)
				}
			}
		}
		
		aBtn[0].addEventListener('click',function(){
			Cookie.setItem('name','张三',7)
			Cookie.setItem('age','18',7)
			Cookie.setItem('a','1',7)
			Cookie.setItem('b','2',7)
			Cookie.setItem('c','3',7)
			Cookie.setItem('d','18999999')
		})
		aBtn[1].addEventListener('click',function(){
			let res = Cookie.getItem('a')
			console.log(res);
		})
		aBtn[2].addEventListener('click',function(){
			Cookie.removeItem('name')
		})
		aBtn[3].addEventListener('click',function(){
			let obj = Cookie.getAll()
			for (let key in obj) {
				console.log(key,obj[key]);
			}
		})
		aBtn[4].addEventListener('click',function(){
			Cookie.clear()
		})
		
		
		
		
		/*
		网站的信息  需要数据 
		数据存储在哪里？
		一些比较少的数据  存在本地缓存里面
		存储在电脑里面 不同浏览器的本地缓存 存在不同的位置
		
			cookie
			sessionStorage
			localStorage
			
			都是只能存储  字符串
			sessionStorage：会话存储空间
			作用域	不在不同的浏览器窗口中共享，即使是同一个页面；
			过期时间	标签页关闭就过期
			存储大小  5MB
			localStorage：本地存储空间
			作用域	在所有同源窗口都是共享的；
			过期时间	永远不过期
			存储大小  5MB
			cookie：本地缓存
			作用域	也是在所有同源窗口中共享的
			过期时间  自己设置过期时间,不设置时间 浏览器关闭就过期
			存储大小  4kb

			
			
		1.webstorage本地存储
			webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage
			localStorage和sessionStorage只能存储字符串类型
			获取方式：
			localStorage：window.localStorage;
			sessionStorage：window.sessionStorage;
			WebStorage提供了一些方法，数据操作比cookie方便
			setItem (key, value) —— 保存数据，以键值对的方式储存信息。
			getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
			removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
			clear () —— 删除所有的数据
			key (index) —— 获取某个索引的key
			
			1.1 localStorage
			localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上
			清除localStorage信息，否则这些信息将永远存在。
			1.2 sessionStorage
			sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,
			而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
			
		2.cookie  小量级的数据   大小受限，本身最大4kb
			cookie 
				各个浏览器存储的位置不同
				按照域名区分 每个域名为不同的cookie
				每个域名存储的数据有限制
				可以设置时间  不设置浏览器关闭cookie就结束(不是关闭标签页)
			如何存储 cookie
				document.cookie='aaa=jjkj;expires='
				一条cookie只能存储一条数据 expires 为过期时间
		*/
	</script>
</body>

</html>